<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逐星科技社 - 社团文化</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#69b1ff',
                        dark: '#0f172a',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .bg-glass {
                background: rgba(15, 23, 42, 0.7);
                backdrop-filter: blur(10px);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1), 0 10px 10px -5px rgba(22, 93, 255, 0.04);
            }
        }
    </style>
</head>
<body class="bg-dark text-light min-h-screen">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 z-50 bg-glass border-b border-gray-800">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center">
                <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-20 h-15 mr-3">
                <h1 class="text-xl font-bold">逐星科技社</h1>
            </div>

            <!-- 桌面导航 -->
            <nav class="hidden md:flex space-x-8">
                <a href="index.html" class="hover:text-primary transition-colors py-1">首页</a>
                <a href="about.html" class="hover:text-primary transition-colors py-1">关于我们</a>
                <a href="activities.html" class="hover:text-primary transition-colors py-1">社团活动</a>
                <a href="culture.html" class="text-primary border-b-2 border-primary py-1">社团文化</a>
                <a href="council.html" class="hover:text-primary transition-colors py-1">理事会</a>
                <a href="regulations.html" class="hover:text-primary transition-colors py-1">规章制度</a>
                <a href="join.html" class="hover:text-primary transition-colors py-1">加入我们</a>
                <a href="thanks.html" class="hover:text-primary transition-colors py-1">特别感谢</a>
            </nav>

            <!-- 移动端菜单按钮 -->
            <button class="md:hidden text-2xl" id="menuBtn">
                <i class="fa fa-bars"></i>
            </button>
        </div>

        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden bg-dark border-t border-gray-800" id="mobileMenu">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="index.html" class="hover:text-primary transition-colors py-2">首页</a>
                <a href="about.html" class="hover:text-primary transition-colors py-2">关于我们</a>
                <a href="activities.html" class="hover:text-primary transition-colors py-2">社团活动</a>
                <a href="culture.html" class="text-primary py-2">社团文化</a>
                <a href="council.html" class="hover:text-primary transition-colors py-2">理事会</a>
                <a href="regulations.html" class="hover:text-primary transition-colors py-2">规章制度</a>
                <a href="join.html" class="hover:text-primary transition-colors py-2">加入我们</a>
                <a href="thanks.html" class="text-primary py-2">特别感谢</a>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="pt-32 pb-16 px-4 border-b border-gray-800">
        <div class="container mx-auto max-w-6xl">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4">社团文化</h1>
            <p class="text-gray-400 max-w-3xl">
                探索逐星科技社的文化内涵、视觉标识与精神理念
            </p>
        </div>
    </section>

    <!-- 社团理念 -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row gap-12 items-center">
                <div class="md:w-1/2">
                    <h2 class="text-2xl font-bold mb-6">社团理念</h2>
                    <div class="space-y-6">
                        <div class="bg-gray-800/30 p-6 rounded-xl border-l-4 border-primary">
                            <h3 class="text-xl font-semibold mb-2">探索未知</h3>
                            <p class="text-gray-300">
                                我们鼓励社员保持好奇心，勇于探索科技前沿领域，不断拓展知识边界，挑战自我极限。
                            </p>
                        </div>

                        <div class="bg-gray-800/30 p-6 rounded-xl border-l-4 border-primary">
                            <h3 class="text-xl font-semibold mb-2">勇敢创新</h3>
                            <p class="text-gray-300">
                                创新是科技发展的核心动力，我们培养社员的创新思维，鼓励提出新观点、尝试新方法、创造新事物。
                            </p>
                        </div>

                        <div class="bg-gray-800/30 p-6 rounded-xl border-l-4 border-primary">
                            <h3 class="text-xl font-semibold mb-2">协作共赢</h3>
                            <p class="text-gray-300">
                                团队合作是完成复杂项目的关键，我们强调团队精神，培养社员的沟通能力与协作意识，共同成长进步。
                            </p>
                        </div>
                    </div>
                </div>

                <div class="md:w-1/2">
                    <img src="images/第一版社娘.png" alt="逐星科技社社娘" class="w-full max-w-md mx-auto rounded-lg shadow-xl">
                </div>
            </div>
        </div>
    </section>

    <!-- 视觉文化 -->
    <section class="py-16 px-4 bg-gray-900">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-2xl font-bold mb-10 text-center">视觉文化</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 社团标志 -->
                <div class="bg-gray-800/50 p-6 rounded-xl text-center card-hover">
                    <h3 class="text-xl font-semibold mb-4">社团标志</h3>
                    <div class="mb-6">
                        <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-70 h-48 mx-auto">
                    </div>
                    <p class="text-gray-300">
                        社团标志融合了科技与探索元素，象征着逐星人对科技的热爱与对未知的探索精神。标志设计简洁现代，展现了社团的科技属性与活力。
                    </p>
                </div>

                <!-- 社娘形象 -->
                <div class="bg-gray-800/50 p-6 rounded-xl text-center card-hover">
                    <h3 class="text-xl font-semibold mb-4">社娘形象</h3>
                    <div class="mb-6">
                        <img src="images/第一版社娘.png" alt="逐星科技社社娘" class="w-48 h-48 mx-auto object-contain">
                    </div>
                    <p class="text-gray-300">
                        社娘形象是社团文化的重要组成部分，代表着逐星科技社的活力与创造力。她的设计融合了科技元素与青春活力，展现了社团的精神风貌。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 宣传资料 -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-2xl font-bold mb-10 text-center">宣传资料</h2>

            <div class="bg-gray-800/30 p-8 rounded-xl max-w-3xl mx-auto">
                <div class="flex flex-col md:flex-row items-center gap-6">
                    <div class="w-24 h-32 bg-primary/20 rounded-lg flex items-center justify-center">
                        <i class="fa fa-file-pdf-o text-5xl text-primary"></i>
                    </div>
                    <div class="flex-1 text-center md:text-left">
                        <h3 class="text-xl font-semibold mb-2">逐星科技社第一届宣传手册</h3>
                        <p class="text-gray-400 mb-4">
                            包含社团介绍、活动规划、加入方式等详细信息，全面了解逐星科技社
                        </p>
                        <a href="逐星科技社第一届宣传手册.pdf" download class="inline-flex items-center px-5 py-2 bg-primary hover:bg-primary/80 rounded-lg transition-all">
                            <i class="fa fa-download mr-2"></i> 下载手册
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- 页脚 -->
    <footer class="bg-gray-900 border-t border-gray-800 py-12 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row justify-between mb-10">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center mb-4">
                        <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-20 h-15 mr-3">
                        <h3 class="text-xl font-bold">逐星科技社</h3>
                    </div>
                    <p class="text-gray-400 max-w-md">
                        探索未知、勇敢创新，逐星科技社致力于为每一位对科学与技术怀有热情的学生提供广阔的学习平台。
                    </p>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                        <ul class="space-y-2">
                            <li><a href="index.html" class="text-gray-400 hover:text-primary">首页</a></li>
                            <li><a href="about.html" class="text-gray-400 hover:text-primary">关于我们</a></li>
                            <li><a href="activities.html" class="text-gray-400 hover:text-primary">社团活动</a></li>
                            <li><a href="join.html" class="text-gray-400 hover:text-primary">加入我们</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-semibold mb-4">资源中心</h4>
                        <ul class="space-y-2">
                            <li><a href="regulations.html" class="text-gray-400 hover:text-primary">规章制度</a></li>
                            <li><a href="culture.html" class="text-gray-400 hover:text-primary">社团文化</a></li>
                            <li><a href="council.html" class="text-gray-400 hover:text-primary">理事会</a></li>
                        </ul>
                    </div>

                    <div class="col-span-2 md:col-span-1">
                        <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                        <ul class="space-y-2">
                            <li class="flex items-center text-gray-400">
                                <i class="fa fa-envelope mr-2"></i>
                                <a href="mailto:boluochuixue@outlook.com" class="hover:text-primary">boluochuixue@outlook.com</a>
                            </li>
                            <li class="flex items-center text-gray-400">
                                <i class="fa fa-qq mr-2"></i>
                                <span>1465153649</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm mb-4 md:mb-0">
                    © 2024 逐星科技社 版权所有
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-primary text-xl"><i class="fa fa-qq"></i></a>
                    <a href="#" class="text-gray-400 hover:text-primary text-xl"><i class="fa fa-weixin"></i></a>
                    <a href="#" class="text-gray-400 hover:text-primary text-xl"><i class="fa fa-envelope"></i></a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('menuBtn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });

        // 滚动时导航栏样式变化
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('bg-dark/95');
                header.classList.remove('bg-glass');
            } else {
                header.classList.add('bg-glass');
                header.classList.remove('bg-dark/95');
            }
        });
    </script>
</body>
</html>
